<template>
    <div id="app">
        <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="搜索" name="1">
<!--                <div style="text-align: center;">-->
<!--                    <el-form :inline="true" :model="SelectFormInline" class="demo-form-inline">-->
<!--                        <el-date-picker-->
<!--                                v-model="SelectFormInline.selectDate"-->
<!--                                type="datetimerange"-->
<!--                                range-separator="至"-->
<!--                                start-placeholder="开始日期"-->
<!--                                end-placeholder="结束日期"-->
<!--                                value-format="yyyyMMddHHmmss">-->
<!--                        </el-date-picker>-->
<!--                        <el-form-item>-->
<!--                            <el-button type="primary" @click="selectTo">查询</el-button>-->
<!--                        </el-form-item>-->
<!--                    </el-form>-->
<!--                </div>-->
            </el-collapse-item>
            <el-collapse-item title="用户量统计" name="2">
                <div id="userVolume" style="width: 600px;height:400px;float:left;"></div>
                <div id="areaShopNum" style="width: 600px;height:400px;float:right;"></div>
            </el-collapse-item>
            <el-collapse-item title="商铺销售统计" name="2">
                <div id="areaShopNum1" style="width: 600px;height:400px;float:left;"></div>
                <div id="areaShopNum2" style="width: 600px;height:400px;float:right;"></div>
            </el-collapse-item>

        </el-collapse>
    </div>
</template>

<script>
    export default {
        name: "create",
        data () {
            return {
                activeNames: ['1','2'],
                SelectFormInline:{
                    selectDate:[],
                    searchStart:'',
                    searchEnd:'',
                },
            }
        },
        mounted(){
            this.setUserVolumeChart();
            this.setAreaShopNumChart();
            this.setShopSalesVolumeChart();
        },

        methods: {
            //日期查询
            selectTo(){
                if(this.SelectFormInline.selectDate != null){
                    if(this.SelectFormInline.selectDate.length > 0){
                        this.SelectFormInline.searchStart = this.SelectFormInline.selectDate[0];
                        this.SelectFormInline.searchEnd = this.SelectFormInline.selectDate[1];
                    }
                }else{
                    this.SelectFormInline.searchStart = '';
                    this.SelectFormInline.searchEnd = '';
                }
                this.setUserVolumeChart();
                this.setShopSalesVolumeChart();
            },
            handleChange(val) {
            },
            //注册用户量和入驻商家量
            setUserVolumeChart(){
                // 基于准备好的dom，初始化echarts实例
                var userVolumeChart = this.$echarts.init(document.getElementById('userVolume'));
                // 使用刚指定的配置项和数据显示图表。
                this.$http.post("/statistical/statistical/findByShopAndUserNum").then(function (result) {

                    var userVolumeData =result.data.data;
                    userVolumeChart.setOption({
                        title: {
                            text: '用户数与商家数',
                            subtext: '实时更新',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: '数量',
                                type: 'pie',
                                radius: '50%',
                                data:userVolumeData,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    });
                });
            },
            //每个区域拥有的店铺数量
            setAreaShopNumChart(){
                // 基于准备好的dom，初始化echarts实例
                var areaShopNumChart = this.$echarts.init(document.getElementById('areaShopNum1'));

                this.$http.post("/statistical/statistical/findShopAndPrice").then(function (result) {
                    console.log(result)
                    var data =result.data.data;
                    // for(var i = 0;i < result.data.data.length;i++){
                    //         data.push({
                    //             value:result.data.data[i].shopNum,
                    //             name:result.data.data[i].areaName
                    //         })
                    // }
                    areaShopNumChart.setOption({
                        title: {
                            text: '店铺的销售价格',
                            subtext: '实时更新',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: '价格',
                                type: 'pie',
                                radius: '50%',
                                data: data,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    });
                });
            },
            //各店铺销量
            setShopSalesVolumeChart(){
                // 基于准备好的dom，初始化echarts实例
                var ShopSalesVolumeChart = this.$echarts.init(document.getElementById('shopSalesVolume'));
                // 指定图表的配置项和数据
                this.$http.post("vd-statistics/statistics/getShopSalesVolume",this.SelectFormInline).then(function (result) {
                    var shopNameData = [];
                    var salesVolumeData = [];
                    for(var i = 0;i < result.data.data.length;i++){
                        shopNameData.push('' + result.data.data[i].shopName);
                        salesVolumeData.push(result.data.data[i].salesVolume);
                    }
                    ShopSalesVolumeChart.setOption({
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                axisLabel:{
                                    interval: 0,      //必须带的属性
                                    rotate:30       //倾斜角度
                                },
                                type: 'category',
                                data: shopNameData,
                                axisTick: {
                                    alignWithLabel: true
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '销量',
                                type: 'bar',
                                barWidth: '40%',
                                data: salesVolumeData
                            }
                        ]
                    });
                });
            },
        }
    }
</script>
<style scoped>
    .el-card__body {
        padding: 20px;
        height: 485px;
    }
</style>
